﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model Lsw.Abp.AspNetCore.Mvc.UI.Theme.Stisla.Pages.Dashboard
@inject IPageLayout PageLayout
@{
    PageLayout.Content.MenuItemName = "Stisla.Dashboard"; 
}

@section styles {
    <link rel="stylesheet" href="/themes/stisla/assets/modules/jqvmap/dist/jqvmap.css">
    <link rel="stylesheet" href="/themes/stisla/assets/modules/summernote/summernote-bs4.css">
    <link rel="stylesheet" href="/themes/stisla/assets/modules/owlcarousel2/dist/assets/owl.carousel.css">
    <link rel="stylesheet" href="/themes/stisla/assets/modules/owlcarousel2/dist/assets/owl.theme.default.css">
}

@section scripts {
    <script src="/themes/stisla/assets/modules/jquery.sparkline.min.js"></script>
    <script src="/themes/stisla/assets/modules/chart.min.js"></script>
    <script src="/themes/stisla/assets/modules/owlcarousel2/dist/owl.carousel.js"></script>
    <script src="/themes/stisla/assets/modules/summernote/summernote-bs4.js"></script>
    <script src="/themes/stisla/assets/modules/chocolat/dist/js/jquery.chocolat.js"></script>
    <script src="/themes/stisla/assets/js/page/index.js"></script>
}

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="card card-statistic-2">
            <div class="card-stats">
                <div class="card-stats-title">
                    Order Statistics -
                    <div class="dropdown d-inline">
                        <a class="font-weight-600 dropdown-toggle" data-toggle="dropdown" href="#" id="orders-month">August</a>
                        <ul class="dropdown-menu dropdown-menu-sm">
                            <li class="dropdown-title">Select Month</li>
                            <li>
                                <a href="#" class="dropdown-item">January</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">February</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">March</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">April</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">May</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">June</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">July</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item active">August</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">September</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">October</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">November</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">December</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-stats-items">
                    <div class="card-stats-item">
                        <div class="card-stats-item-count">24</div>
                        <div class="card-stats-item-label">Pending</div>
                    </div>
                    <div class="card-stats-item">
                        <div class="card-stats-item-count">12</div>
                        <div class="card-stats-item-label">Shipping</div>
                    </div>
                    <div class="card-stats-item">
                        <div class="card-stats-item-count">23</div>
                        <div class="card-stats-item-label">Completed</div>
                    </div>
                </div>
            </div>
            <div class="card-icon shadow-primary bg-primary">
                <i class="fas fa-archive"></i>
            </div>
            <div class="card-wrap">
                <div class="card-header">
                    <h4>Total Orders</h4>
                </div>
                <div class="card-body">
                    59
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="card card-statistic-2">
            <div class="card-chart">
                <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                    <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                    </div>
                </div>
                <canvas id="balance-chart" height="123" width="521" class="chartjs-render-monitor" style="display: block; width: 521px; height: 123px;"></canvas>
            </div>
            <div class="card-icon shadow-primary bg-primary">
                <i class="fas fa-dollar-sign"></i>
            </div>
            <div class="card-wrap">
                <div class="card-header">
                    <h4>Balance</h4>
                </div>
                <div class="card-body">
                    $187,13
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="card card-statistic-2">
            <div class="card-chart">
                <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                    <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                    </div>
                </div>
                <canvas id="sales-chart" height="123" width="521" class="chartjs-render-monitor" style="display: block; width: 521px; height: 123px;"></canvas>
            </div>
            <div class="card-icon shadow-primary bg-primary">
                <i class="fas fa-shopping-bag"></i>
            </div>
            <div class="card-wrap">
                <div class="card-header">
                    <h4>Sales</h4>
                </div>
                <div class="card-body">
                    4,732
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h4>Budget vs Sales</h4>
            </div>
            <div class="card-body">
                <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                    <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                        <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                    </div>
                </div>
                <canvas id="myChart" height="527" width="1002" class="chartjs-render-monitor" style="display: block; width: 1002px; height: 527px;"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card gradient-bottom">
            <div class="card-header">
                <h4>Top 5 Products</h4>
                <div class="card-header-action dropdown">
                    <a href="#" data-toggle="dropdown" class="btn btn-danger dropdown-toggle">Month</a>
                    <ul class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
                        <li class="dropdown-title">Select Period</li>
                        <li>
                            <a href="#" class="dropdown-item">Today</a>
                        </li>
                        <li>
                            <a href="#" class="dropdown-item">Week</a>
                        </li>
                        <li>
                            <a href="#" class="dropdown-item active">Month</a>
                        </li>
                        <li>
                            <a href="#" class="dropdown-item">This Year</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-body" id="top-5-scroll" tabindex="2" style="height: 315px; overflow: hidden; outline: none;">
                <ul class="list-unstyled list-unstyled-border">
                    <li class="media">
                        <img class="mr-3 rounded" width="55" src="/themes/stisla/assets/img/products/product-3-50.png" alt="product">
                        <div class="media-body">
                            <div class="float-right">
                                <div class="font-weight-600 text-muted text-small">86 Sales</div>
                            </div>
                            <div class="media-title">oPhone S9 Limited</div>
                            <div class="mt-1">
                                <div class="budget-price">
                                    <div class="budget-price-square bg-primary" data-width="64%" style="width: 64%;"></div>
                                    <div class="budget-price-label">$68,714</div>
                                </div>
                                <div class="budget-price">
                                    <div class="budget-price-square bg-danger" data-width="43%" style="width: 43%;"></div>
                                    <div class="budget-price-label">$38,700</div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="media">
                        <img class="mr-3 rounded" width="55" src="/themes/stisla/assets/img/products/product-4-50.png" alt="product">
                        <div class="media-body">
                            <div class="float-right">
                                <div class="font-weight-600 text-muted text-small">67 Sales</div>
                            </div>
                            <div class="media-title">iBook Pro 2018</div>
                            <div class="mt-1">
                                <div class="budget-price">
                                    <div class="budget-price-square bg-primary" data-width="84%" style="width: 84%;"></div>
                                    <div class="budget-price-label">$107,133</div>
                                </div>
                                <div class="budget-price">
                                    <div class="budget-price-square bg-danger" data-width="60%" style="width: 60%;"></div>
                                    <div class="budget-price-label">$91,455</div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="media">
                        <img class="mr-3 rounded" width="55" src="/themes/stisla/assets/img/products/product-1-50.png" alt="product">
                        <div class="media-body">
                            <div class="float-right">
                                <div class="font-weight-600 text-muted text-small">63 Sales</div>
                            </div>
                            <div class="media-title">Headphone Blitz</div>
                            <div class="mt-1">
                                <div class="budget-price">
                                    <div class="budget-price-square bg-primary" data-width="34%" style="width: 34%;"></div>
                                    <div class="budget-price-label">$3,717</div>
                                </div>
                                <div class="budget-price">
                                    <div class="budget-price-square bg-danger" data-width="28%" style="width: 28%;"></div>
                                    <div class="budget-price-label">$2,835</div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="media">
                        <img class="mr-3 rounded" width="55" src="/themes/stisla/assets/img/products/product-3-50.png" alt="product">
                        <div class="media-body">
                            <div class="float-right">
                                <div class="font-weight-600 text-muted text-small">28 Sales</div>
                            </div>
                            <div class="media-title">oPhone X Lite</div>
                            <div class="mt-1">
                                <div class="budget-price">
                                    <div class="budget-price-square bg-primary" data-width="45%" style="width: 45%;"></div>
                                    <div class="budget-price-label">$13,972</div>
                                </div>
                                <div class="budget-price">
                                    <div class="budget-price-square bg-danger" data-width="30%" style="width: 30%;"></div>
                                    <div class="budget-price-label">$9,660</div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="media">
                        <img class="mr-3 rounded" width="55" src="/themes/stisla/assets/img/products/product-5-50.png" alt="product">
                        <div class="media-body">
                            <div class="float-right">
                                <div class="font-weight-600 text-muted text-small">19 Sales</div>
                            </div>
                            <div class="media-title">Old Camera</div>
                            <div class="mt-1">
                                <div class="budget-price">
                                    <div class="budget-price-square bg-primary" data-width="35%" style="width: 35%;"></div>
                                    <div class="budget-price-label">$7,391</div>
                                </div>
                                <div class="budget-price">
                                    <div class="budget-price-square bg-danger" data-width="28%" style="width: 28%;"></div>
                                    <div class="budget-price-label">$5,472</div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="card-footer pt-3 d-flex justify-content-center">
                <div class="budget-price justify-content-center">
                    <div class="budget-price-square bg-primary" data-width="20" style="width: 20px;"></div>
                    <div class="budget-price-label">Selling Price</div>
                </div>
                <div class="budget-price justify-content-center">
                    <div class="budget-price-square bg-danger" data-width="20" style="width: 20px;"></div>
                    <div class="budget-price-label">Budget Price</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
    <h4>Best Products</h4>
</div>
<div class="card-body">
<div class="owl-carousel owl-theme owl-loaded owl-drag" id="products-carousel">


<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-741px, 0px, 0px); transition: all 0.25s ease 0s; width: 2225px;">
<div class="owl-item cloned" style="width: 237.167px; margin-right: 10px;">
    <div>
        <div class="product-item pb-3">
            <div class="product-image">
                <img alt="image" src="/themes/stisla/assets/img/products/product-4-50.png" class="img-fluid">
            </div>
            <div class="product-details">
                <div class="product-name">iBook Pro 2018</div>
                <div class="product-review">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
                <div class="text-muted text-small">67 Sales</div>
                <div class="product-cta">
                    <a href="#" class="btn btn-primary">Detail</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="owl-item cloned" style="width: 237.167px; margin-right: 10px;">
    <div>
        <div class="product-item">
            <div class="product-image">
                <img alt="image" src="/themes/stisla/assets/img/products/product-3-50.png" class="img-fluid">
            </div>
            <div class="product-details">
                <div class="product-name">oPhone S9 Limited</div>
                <div class="product-review">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half"></i>
                </div>
                <div class="text-muted text-small">86 Sales</div>
                <div class="product-cta">
                    <a href="#" class="btn btn-primary">Detail</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="owl-item cloned" style="width: 237.167px; margin-right: 10px;">
    <div>
        <div class="product-item">
            <div class="product-image">
                <img alt="image" src="/themes/stisla/assets/img/products/product-1-50.png" class="img-fluid">
            </div>
            <div class="product-details">
                <div class="product-name">Headphone Blitz</div>
                <div class="product-review">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
                <div class="text-muted text-small">63 Sales</div>
                <div class="product-cta">
                    <a href="#" class="btn btn-primary">Detail</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="owl-item active" style="width: 237.167px; margin-right: 10px;">
    <div>
        <div class="product-item pb-3">
            <div class="product-image">
                <img alt="image" src="/themes/stisla/assets/img/products/product-4-50.png" class="img-fluid">
            </div>
            <div class="product-details">
                <div class="product-name">iBook Pro 2018</div>
                <div class="product-review">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
                <div class="text-muted text-small">67 Sales</div>
                <div class="product-cta">
                    <a href="#" class="btn btn-primary">Detail</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="owl-item active" style="width: 237.167px; margin-right: 10px;">
    <div>
        <div class="product-item">
            <div class="product-image">
                <img alt="image" src="/themes/stisla/assets/img/products/product-3-50.png" class="img-fluid">
            </div>
            <div class="product-details">
                <div class="product-name">oPhone S9 Limited</div>
                <div class="product-review">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half"></i>
                </div>
                <div class="text-muted text-small">86 Sales</div>
                <div class="product-cta">
                    <a href="#" class="btn btn-primary">Detail</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="owl-item active" style="width: 237.167px; margin-right: 10px;">
    <div>
        <div class="product-item">
            <div class="product-image">
                <img alt="image" src="/themes/stisla/assets/img/products/product-1-50.png" class="img-fluid">
            </div>
            <div class="product-details">
                <div class="product-name">Headphone Blitz</div>
                <div class="product-review">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
                <div class="text-muted text-small">63 Sales</div>
                <div class="product-cta">
                    <a href="#" class="btn btn-primary">Detail</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="owl-item cloned" style="width: 237.167px; margin-right: 10px;">
    <div>
        <div class="product-item pb-3">
            <div class="product-image">
                <img alt="image" src="/themes/stisla/assets/img/products/product-4-50.png" class="img-fluid">
            </div>
            <div class="product-details">
                <div class="product-name">iBook Pro 2018</div>
                <div class="product-review">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
                <div class="text-muted text-small">67 Sales</div>
                <div class="product-cta">
                    <a href="#" class="btn btn-primary">Detail</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="owl-item cloned" style="width: 237.167px; margin-right: 10px;">
    <div>
        <div class="product-item">
            <div class="product-image">
                <img alt="image" src="/themes/stisla/assets/img/products/product-3-50.png" class="img-fluid">
            </div>
            <div class="product-details">
                <div class="product-name">oPhone S9 Limited</div>
                <div class="product-review">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half"></i>
                </div>
                <div class="text-muted text-small">86 Sales</div>
                <div class="product-cta">
                    <a href="#" class="btn btn-primary">Detail</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="owl-item cloned" style="width: 237.167px; margin-right: 10px;">
    <div>
        <div class="product-item">
            <div class="product-image">
                <img alt="image" src="/themes/stisla/assets/img/products/product-1-50.png" class="img-fluid">
            </div>
            <div class="product-details">
                <div class="product-name">Headphone Blitz</div>
                <div class="product-review">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
                <div class="text-muted text-small">63 Sales</div>
                <div class="product-cta">
                    <a href="#" class="btn btn-primary">Detail</a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<div class="owl-nav disabled">
    <div class="owl-prev">prev</div>
    <div class="owl-next">next</div>
</div>
<div class="owl-dots disabled">
    <div class="owl-dot active">
        <span></span>
    </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
    <div class="card">
        <div class="card-header">
            <h4>Top Countries</h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm-6">
                    <div class="text-title mb-2">July</div>
                    <ul class="list-unstyled list-unstyled-border list-unstyled-noborder mb-0">
                        <li class="media">
                            <img class="img-fluid mt-1 img-shadow" src="/themes/stisla/assets/modules/flag-icon-css/flags/_4x3/id.png" alt="image" width="40">
                            <div class="media-body ml-3">
                                <div class="media-title">Indonesia</div>
                                <div class="text-small text-muted">3,282 <i class="fas fa-caret-down text-danger"></i></div>
                            </div>
                        </li>
                        <li class="media">
                            <img class="img-fluid mt-1 img-shadow" src="/themes/stisla/assets/modules/flag-icon-css/flags/_4x3/my.png" alt="image" width="40">
                            <div class="media-body ml-3">
                                <div class="media-title">Malaysia</div>
                                <div class="text-small text-muted">2,976 <i class="fas fa-caret-down text-danger"></i></div>
                            </div>
                        </li>
                        <li class="media">
                            <img class="img-fluid mt-1 img-shadow" src="/themes/stisla/assets/modules/flag-icon-css/flags/_4x3/us.png" alt="image" width="40">
                            <div class="media-body ml-3">
                                <div class="media-title">United States</div>
                                <div class="text-small text-muted">1,576 <i class="fas fa-caret-up text-success"></i></div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-6 mt-sm-0 mt-4">
                    <div class="text-title mb-2">August</div>
                    <ul class="list-unstyled list-unstyled-border list-unstyled-noborder mb-0">
                        <li class="media">
                            <img class="img-fluid mt-1 img-shadow" src="/themes/stisla/assets/modules/flag-icon-css/flags/_4x3/id.png" alt="image" width="40">
                            <div class="media-body ml-3">
                                <div class="media-title">Indonesia</div>
                                <div class="text-small text-muted">3,486 <i class="fas fa-caret-up text-success"></i></div>
                            </div>
                        </li>
                        <li class="media">
                            <img class="img-fluid mt-1 img-shadow" src="/themes/stisla/assets/modules/flag-icon-css/flags/_4x3/ps.png" alt="image" width="40">
                            <div class="media-body ml-3">
                                <div class="media-title">Palestine</div>
                                <div class="text-small text-muted">3,182 <i class="fas fa-caret-up text-success"></i></div>
                            </div>
                        </li>
                        <li class="media">
                            <img class="img-fluid mt-1 img-shadow" src="/themes/stisla/assets/modules/flag-icon-css/flags/_4x3/de.png" alt="image" width="40">
                            <div class="media-body ml-3">
                                <div class="media-title">Germany</div>
                                <div class="text-small text-muted">2,317 <i class="fas fa-caret-down text-danger"></i></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h4>Invoices</h4>
                <div class="card-header-action">
                    <a href="#" class="btn btn-danger">View More <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive table-invoice">
                    <table class="table table-striped">
                        <tbody>
                        <tr>
                            <th>Invoice ID</th>
                            <th>Customer</th>
                            <th>Status</th>
                            <th>Due Date</th>
                            <th>Action</th>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">INV-87239</a>
                            </td>
                            <td class="font-weight-600">Kusnadi</td>
                            <td>
                                <div class="badge badge-warning">Unpaid</div>
                            </td>
                            <td>July 19, 2018</td>
                            <td>
                                <a href="#" class="btn btn-primary">Detail</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">INV-48574</a>
                            </td>
                            <td class="font-weight-600">Hasan Basri</td>
                            <td>
                                <div class="badge badge-success">Paid</div>
                            </td>
                            <td>July 21, 2018</td>
                            <td>
                                <a href="#" class="btn btn-primary">Detail</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">INV-76824</a>
                            </td>
                            <td class="font-weight-600">Muhamad Nuruzzaki</td>
                            <td>
                                <div class="badge badge-warning">Unpaid</div>
                            </td>
                            <td>July 22, 2018</td>
                            <td>
                                <a href="#" class="btn btn-primary">Detail</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">INV-84990</a>
                            </td>
                            <td class="font-weight-600">Agung Ardiansyah</td>
                            <td>
                                <div class="badge badge-warning">Unpaid</div>
                            </td>
                            <td>July 22, 2018</td>
                            <td>
                                <a href="#" class="btn btn-primary">Detail</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">INV-87320</a>
                            </td>
                            <td class="font-weight-600">Ardian Rahardiansyah</td>
                            <td>
                                <div class="badge badge-success">Paid</div>
                            </td>
                            <td>July 28, 2018</td>
                            <td>
                                <a href="#" class="btn btn-primary">Detail</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card card-hero">
            <div class="card-header">
                <div class="card-icon">
                    <i class="far fa-question-circle"></i>
                </div>
                <h4>14</h4>
                <div class="card-description">Customers need help</div>
            </div>
            <div class="card-body p-0">
                <div class="tickets-list">
                    <a href="#" class="ticket-item">
                        <div class="ticket-title">
                            <h4>My order hasn't arrived yet</h4>
                        </div>
                        <div class="ticket-info">
                            <div>Laila Tazkiah</div>
                            <div class="bullet"></div>
                            <div class="text-primary">1 min ago</div>
                        </div>
                    </a>
                    <a href="#" class="ticket-item">
                        <div class="ticket-title">
                            <h4>Please cancel my order</h4>
                        </div>
                        <div class="ticket-info">
                            <div>Rizal Fakhri</div>
                            <div class="bullet"></div>
                            <div>2 hours ago</div>
                        </div>
                    </a>
                    <a href="#" class="ticket-item">
                        <div class="ticket-title">
                            <h4>Do you see my mother?</h4>
                        </div>
                        <div class="ticket-info">
                            <div>Syahdan Ubaidillah</div>
                            <div class="bullet"></div>
                            <div>6 hours ago</div>
                        </div>
                    </a>
                    <a href="#" class="ticket-item ticket-more">
                        View All <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>